const webpack = require('webpack')
const path = require('path')
const RemarkHTML =require("remark-html");
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 清理dist目录
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 此plugin不需要解构 默认就是导出此成员
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 单独提取css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 压缩css
const TerserWebpackPlugin = require('terser-webpack-plugin')


class MyPlugin {
  apply(compiler) {
    // console.log('my plugin staring')

    compiler.hooks.emit.tap('MyPlugin', compilation=> {
      for(const name in compilation.assets) {
        // console.log(compilation.assets[name].source())
        if(name.endsWith('.js')){
          const contents = compilation.assets[name].source()
          const withoutcomments = contents.replace(/\/\*\*+\*\//g,'')
          compilation.assets[name] = {
            source: () => withoutcomments,
            size: () => withoutcomments.length 
          }
        }
      }
    })
  }
}

module.exports=(env,argy) => {
  const config =  {
    mode: 'none', // 模式选择   development production none
    entry: './src/main.js', // 必须是相对路径
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist'), // 绝对路径  因为本身是运行在node环境中，所以直接引入path
      // publicPath: 'dist/', //引用资源默认是根目录下  需要设置为dist/   // new HtmlWebpackPlugin() 之后就不需要了
    },
    devServer: {
      hot: true,  // 开启HDR 热更新模式
      contentBase: './dist', // 指定一个额外的静态资源目录的方式
      proxy: { // 代理API
        '/api': {
          // http://localhost:8080/api/users -> https://api.githun.com/api/uses
          target: 'https://api.github.com',
          pathRewrite: { '^/api': '' },
          changeOrigin: true,
        },
      }
    },
    devtool: 'source-map', // source-map 有12种模式  // cheap-module-eval-source-map  开发模式   // none  // 生产模式
    optimization: {
      usedExports: true,  // tree shaking  生产模式下默认是true
      minimizer: [
        new TerserWebpackPlugin(),
        new OptimizeCssAssetsWebpackPlugin(),
      ], // 把多余的代码干掉
      concatenateModules: true, // 尽可能的将所有模块合并输出到一个函数中
      sideEffects: true,  // 只打包引用的模块
      // splitChunks: {
      //   chunks: 'all'
      // }
    },
    module: {
      rules: [
        {
          test: /.js$/,
          use: {
            loader: 'babel-loader',  // 处理es6新特性
            options: {
              presets: ['@babel/preset-env']
            },
          }
        },
        {
          test: /.css$/,
          use: [ // 从后往前执行
            // 'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },
        {
          test: /.png$/,
          // use: 'file-loader'
          // use: 'url-loader'  // 适用于体积比较小的资源 减少请求次数  
          use: {
            loader: 'url-loader',
            options: {
              limit: 10* 1024 // 10KB
            } // 如果做限制的话  必须有file-loader
          }
        },
        {
          test: /.html$/,
          use: {
            loader: 'html-loader', // 只默认触发 img的src属性 
            options: {
              // attributes: ['img:src','a:href']  // 这样就可以拿到其他标签的图片属性
              sources: {
                list: [
                  {
                    tag: 'img',
                    attribute: 'data-src',
                    type: 'src',
                  },
                  // {
                  //   tag: 'link',
                  //   attribute: 'data-href',
                  //   type: 'src',
                  // },
                ]
              }
            }
          }
        },
        {
          test: /\.md$/,
          use: [
            {
              loader: "html-loader",
            },
            {
              loader: "remark-loader",
              options: {
                remarkOptions: {
                  plugins: [RemarkHTML],
                },
              },
            },
          ],
        },
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: path.join(__dirname,'./index.html')
    }),
    new MyPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({ // 注入自己想要的api  是个字符串格式
      API_BASE_URL: '"https://api.exaple.com"'
    }),
    new MiniCssExtractPlugin(),
    ]
  }
  
  if(env === 'production') { // 生产模式
    config.mode = 'production'
    config.devtool = false
    config.plugins = [
      ...config.plugins,
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin(['public'])
    ]
  }

  return config
}